<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        button {
            display: inline-block;
            margin: 0px 10px;
            width: 180px;
            height: 40px;
            cursor: pointer;
        }
        #payButton {
            border: 1px solid #C40000;
            background-color: #5bc0de;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: white;
            font-family: arial;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#payButton").click(function () {
                if ($("#linkman").val().trim()==="" || $("#phone").val().trim()==="" ||
                    $("#province").val().trim()==="" || $("#city").val().trim()==="" ||
                    $("#area").val().trim()==="" || $("#detailedAddress").val().trim()==="") {
                    alert("请填写完整的收货地址，避免收不到物品！")
                } else {
                    $.ajax({
                        url: "order/generateOrder",
                        data: {
                            "linkman": $("#linkman").val().trim(),
                            "phone": $("#phone").val().trim(),
                            "province": $("#province").val().trim(),
                            "city": $("#city").val().trim(),
                            "area": $("#area").val().trim(),
                            "detailedAddress": $("#detailedAddress").val().trim(),
                            "nums": ${nums},
                            "price": ${price},
                            "customerName": "${sessionScope.userName}",
                            "userName": "${product.userName}",
                            "productId": ${product.id}
                        },
                        type: "post",
                        dataType: "text",
                        success: function (resp) {
                                alert(resp)
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<div style="padding: 16px; background-color: #f5f5f5; color: #777777">
    ${product.content} / 支付页面
</div>
<div style="display: flex; margin-left: 300px; text-align: center">
    <div align="center" style="margin-top: 30px">
        <form id="commitForm">
            <table style="line-height: 30px; width: 400px;
            border: 1px solid #faebcc">
                <tr style="color: #8a6d3b;
                           background-color: #fcf8e3;
                           border: 1px solid #faebcc;"
                    align="center">
                    <td colspan="2">编辑收货地址</td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>收货人</td>
                    <td>
                        <input type="text" id="linkman" name="linkman">
                    </td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>手机号码</td>
                    <td><input type="text"  id="phone" name="phone" /></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>省份</td>
                    <td><input type="text" id="province" name="province"></td>
                </tr>
                <tr align="center" style=" line-height: 32px">
                    <td>城市</td>
                    <td><input type="text" id="city" name="city"></td>
                </tr>
                <tr align="center" style=" line-height: 32px">
                    <td>地区</td>
                    <td><input type="text" id="area" name="nums"></td>
                </tr>
                <tr align="center" style=" line-height: 32px">
                    <td>详细地址</td>
                    <td><input type="text" id="detailedAddress" name="detailedAddress"></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="margin-top: 30px; margin-left: 50px; width: 450px">
        <div style="height: 102px; background:url('static/images/priceBackground.png');
       padding: 10px;color: #666666; width: 400px">
            <div style="margin-top: 10px">
                <span style="color: #777777;display: inline-block; width: 100px;">数量：${nums}</span>
            </div>
            <div style="margin-top: 0px; margin-top: 10px">
            <span style="color: #777777;display: inline-block;
                 width: 68px;position: relative;left: 0px;
                 top: -10px;">价格</span>
                <span style="font-family: Arial;font-size: 24px;
                  color: #C40000;">￥</span>
                <span style="color: #c40000; font-family: Arial;
              font-size: 30px;font-weight: bold;">${price}
                </span>
            </div>
        </div>
        <div style="margin: 40px auto; text-align: center">
            <button id="payButton">立即支付</button>
        </div>
    </div>
</div>
</body>
</html>
